 <template>
  <!-- 列表 -->
  <Page>
    <template #hd>
      <!-- 搜索 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="会员ID">
          <el-input v-model="formInline.user" placeholder="请输入会员ID" clearable />
        </el-form-item>
        <el-form-item label="会员号">
          <el-input v-model="formInline.user" placeholder="请输入会员号" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formInline.user" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="formInline.user" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="会员等级">
          <el-select
            v-model="formInline.region"
            placeholder="会员等级"
            clearable
          >
            <el-option label="普通会员" value="普通会员" />
            <el-option label="铜牌会员" value="铜牌会员" />
            <el-option label="银牌会员" value="银牌会员" />
            <el-option label="金牌会员" value="金牌会员" />
            <el-option label="钻牌会员" value="钻牌会员" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="demo-datetime-picker">
              <div class="block">
              <span class="demonstration">注册时间</span>
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="开始时间"
              />
              </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="demo-datetime-picker">
              <div class="block">
              <span class="demonstration">Default</span>
              <el-date-picker
                  v-model="value2"
                  type="datetime"
                  placeholder="Select date and time"
              />
              </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="primary" @click="onSubmit">重置</el-button>
          <el-button @click="dialogFormVisible = true">+ 新增</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #ct>
      <el-table  :data="list" style="width: 100%">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="头像" label="头像" width="180" />
        <el-table-column prop="vipid" label="会员号" width="180" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="phone" label="手机号" width="180" align="center">
          <template #default="{ row }">
            <span>{{ setPhone(row.phone) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lv" label="会员等级" width="180" />
        <el-table-column prop="balance" label="余额" align="center" width="180">
          <template #default="{ row }">
            <div class="topUp">
              <span> {{ row.balance }} </span>
              <el-button size="small" @click="topUp(row)">充值</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="积分" />
        <el-table-column prop="createdAt" label="注册时间" width="180" align="center">
          <template #default="{row}">
            {{ restime(row) }}
            <!-- <div @click="restime(row)"></div> -->
          </template>
        </el-table-column>
        <el-table-column prop="" label="活跃时间" />
        <el-table-column prop="state" label="状态" >
          <template #default="{ row }">
            <el-switch
              v-model="row.state"
              :active-value="1"
              :inactive-value="0"
              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
          </template>
        </el-table-column>>
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="{ row }">
            <span @click="handleShowEdit({...row})" class="edit">
              <span class="iconfont icon-xiugai"></span>
              修改
            </span>
            <span @click="delMember(row.id)" class="edit">
              <span class="iconfont icon-shanchu"></span>
              删除
            </span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #ft>
      <el-pagination
        layout="total, prev, pager, next, sizes, jumper"
        background
        :page-sizes="[10, 30, 50, 100]"
        :total="total"
        :default-page-size="limit"
        :current-page="page"
        @size-change="handeSizeChange"
        @current-change="handlePageChange"
      />
    </template>
  </Page>
  <!-- 新增会员 弹窗 -->
  <el-dialog v-model="dialogFormVisible" width="788px">
      <template #header> <div class="plusvip">新增会员</div> </template>
      <el-form :model="member" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="会员名称" class="vipname" :label-width="formLabelWidth" prop="name">
              <el-input v-model="member.name" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="会员等级" class="vipname" :label-width="formLabelWidth" prop="lv">
            <el-select
              v-model="member.lv"
              placeholder="会员等级"
              clearable
            >
              <el-option label="普通会员" value="普通会员" />
              <el-option label="铜牌会员" value="铜牌会员" />
              <el-option label="银牌会员" value="银牌会员" />
              <el-option label="金牌会员" value="金牌会员" />
              <el-option label="钻牌会员" value="钻牌会员" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="有限时间" :label-width="formLabelWidth">
      <el-col :span="11">
        <el-date-picker
          v-model="member.starttime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
        <span class="text-gray-500">至</span>
      <el-col :span="11">
        <el-date-picker
          v-model="member.endtime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-form-item label="会员号" :label-width="formLabelWidth">
            <el-input v-model="member.vipid" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="member.phone" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio-group v-model="member.sex">
              <el-radio label=1 name="sex">男</el-radio>
              <el-radio label=0 name="sex">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="member.idcard" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="生日" :label-width="formLabelWidth">
        <el-input v-model="member.birthday" autocomplete="off" />
      </el-form-item>
      <el-form-item label="通讯地址" :label-width="formLabelWidth">
        <el-input v-model="member.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="会员状态" :label-width="formLabelWidth">
        <el-radio-group v-model="member.state">
          <el-radio label="true" name="state"> 正常 </el-radio>>
          <el-radio label="false" name="state"> 禁用 </el-radio>>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注信息" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="member.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="memberAdd">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑弹窗 -->
  <el-dialog v-model="editShow" width="788px">
      <template #header> <div class="plusvip">编辑会员</div> </template>
      <el-form :model="editMember">
        <el-row>
          <el-col :span="24">
            <el-form-item label="会员名称" class="vipname" :label-width="formLabelWidth">
              <el-input v-model="editMember.name" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="会员等级" class="vipname" :label-width="formLabelWidth">
            <el-select
              v-model="editMember.lv"
              placeholder="会员等级"
              clearable
            >
              <el-option label="普通会员" value="普通会员" />
              <el-option label="铜牌会员" value="铜牌会员" />
              <el-option label="银牌会员" value="银牌会员" />
              <el-option label="金牌会员" value="金牌会员" />
              <el-option label="钻牌会员" value="钻牌会员" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="有限时间" :label-width="formLabelWidth">
      <el-col :span="11">
        <el-date-picker
          v-model="editMember.starttime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
        <span class="text-gray-500">至</span>
      <el-col :span="11">
        <el-date-picker
          v-model="editMember.endtime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-form-item label="会员号" :label-width="formLabelWidth">
            <el-input v-model="editMember.vipid" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="editMember.phone" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio-group v-model="editMember.sex">
              <el-radio label=1 name="sex">男</el-radio>
              <el-radio label=0 name="sex">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="editMember.idcard" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="生日" :label-width="formLabelWidth">
        <el-input v-model="editMember.birthday" autocomplete="off" />
      </el-form-item>
      <el-form-item label="通讯地址" :label-width="formLabelWidth">
        <el-input v-model="editMember.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="会员状态" :label-width="formLabelWidth">
        <el-radio-group v-model="editMember.state">
          <el-radio label="true" name="state"> 正常 </el-radio>>
          <el-radio label="false" name="state"> 禁用 </el-radio>>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注信息" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="editMember.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editShow = false">关闭</el-button>
        <el-button type="primary" @click="confirmEdit">
          确定编辑
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 充值弹窗 -->
  <el-dialog v-model="showTopUp" title="余额充值/扣减">
    <el-form :model="editMember" :rules="rules" ref="rulesEditMember">
      <el-form-item label="会员信息:" :label-width="formLabelWidth">
        <span>{{ editMember.name }} (ID:{{ editMember.id }})</span>
      </el-form-item>
      <el-form-item label="余额:" :label-width="formLabelWidth">
        <span>￥{{ editMember.balance }}</span>
      </el-form-item>
      <el-form-item label="变更类型" :label-width="formLabelWidth">
        <el-radio-group v-model="editMember.changetype">
          <el-radio :label="true" name="changetype"> 增加 </el-radio>
          <el-radio :label="false" name="changetype"> 扣减 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-clo :span="12">
          <el-form-item label="变更金额" prop="changem" :label-width="formLabelWidth">
            <el-input v-model.number="editMember.changem" autocomplete="off" />
          </el-form-item>
        </el-clo>
      </el-row>
      <el-form-item label="备注信息" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="editMember.remarkyue" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showTopUp = false">关闭</el-button>
        <el-button type="primary" @click="balanceEdit">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
 reactive, ref, onMounted, onUpdated,
} from 'vue';
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import {
 addmember, getmemberList, updatemember, delmember,
} from '@/api/addmember';
import type { FormInstance, FormRules } from 'element-plus';
import { nanoid, customAlphabet } from 'nanoid';

const formInline = reactive({
  user: '',
  region: '',
  date: '',
});
const value1 = ref('');
const value2 = ref('');
const onSubmit = () => {
  console.log('submit!');
};
// 新增弹窗
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const member = reactive({
  name: '蔡徐坤',
  lv: '',
  time: '',
  starttime: '',
  endtime: '',
  vipid: '',
  phone: '',
  sex: '',
  idcard: '',
  birthday: '',
  address: '',
  state: '',
  remark: '',
  balance: 0.00,
});
const restime = (row: any) => {
  // console.log('注册时间', row.createdAt);
  const newtime = dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss'); // 初始化日期时间
  // console.log('注册时间', newtime);
  return newtime;
};
// 获取列表
const list = ref([]);
const limit = ref(30);
const page = ref(1);
const total = ref(0);
const getList = async () => {
  const $skip = (page.value - 1) * limit.value;
  const res = await getmemberList({
    $skip,
    $limit: limit.value,
  });
  console.log('获取列表的res', res);
  list.value = res.data.data;
  console.log('list666', list);
  total.value = res.data.total;
};

// 充值功能
const chongzhi = ref({
  name: '',
  available: 0.00,
  changetype: true,
  changem: 0.00,
  remark: '',
});
// 修改余额
const setB = reactive({
  id: 0,
  name: '',
  available: 0.00,
  changetype: true,
  changem: 0.00,
  remark: '',
});
// 处理添加
const memberAdd = async () => {
  console.log('得到全部的配件信息', member);
  let huiyuanid = member.vipid;
  let reg = /8\d{12}/;
  const nanoid = customAlphabet('0123456789', 12);
  const uid = nanoid();

  let flag = reg.test(huiyuanid);
  if (!flag) {
    member.vipid = `8${uid}`;
  }
  const res = await addmember(member as any);
  console.log('res', res);
  const { status } = res;
  // console.log('status', status);
  if (status !== 201) return ElMessage.warning('添加失败');
  ElMessage.success('添加成功');
  dialogFormVisible.value = false; // 关闭弹窗
  getList(); // 添加成功之后重新的获取列表内容
  return false;
};

// 处理编辑
const editShow = ref(false);
const editMember = ref({
  name: '',
  lv: '',
  time: '',
  starttime: '',
  endtime: '',
  vipid: '',
  phone: '',
  sex: '',
  idcard: '',
  birthday: '',
  address: '',
  state: '',
  remark: '',
  id: 0,
  balance: 0.00,
  changetype: true,
  changem: 0.00,
  remarkyue: '',
});
const handleShowEdit = async (row: any) => {
  // console.log('row', row.id);
  editMember.value = row;
  console.log(editMember.value);
  editShow.value = true;
};

// 处理修改会员信息
const confirmEdit = async () => {
  const { id, ...postdate } = editMember.value;
  const res = await updatemember(id, postdate);
  const { status } = res;
  if (status === 200) {
    ElMessage.success('编辑成功');
    editShow.value = false;
    getList();
  }
};
// 充值弹窗状态
const showTopUp = ref(false);
// 表单验证
const rules = ref<FormRules<typeof editMember>>({
  changem: [{ required: true, message: '金额不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '会员名不能为空', trigger: 'blur' }],
  lv: [{ required: true, message: '请选择会员等级', trigger: 'blur' }],
});
// 充值按钮
const topUp = (row:any) => {
  showTopUp.value = true; //显示充值弹窗
  editMember.value = row;
};
// 处理修改余额
const balanceEdit = async () => {
  let a1 = Number(editMember.value.changem);
  let a2 = Number(editMember.value.balance);
  if (editMember.value.changetype) {
    editMember.value.balance = a2 + a1;
    return;
  }
  if (!editMember.value.changetype && editMember.value.balance >= 0) {
    editMember.value.balance = a2 - a1;
  }
  const { id, ...postdate } = editMember.value;
  const res = await updatemember(id, postdate);
  const { status } = res;
  if (status === 200) {
    ElMessage.success('余额操作成功');
    showTopUp.value = false;
    getList();
  }
};
onMounted(() => {
  getList();
});
onUpdated(() => {
});
// 处理删除
const delMember = async (id: number) => {
  console.log('删除', id);
  ElMessageBox.confirm(
    '确定要删除会员吗?',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(async () => {
    const res = await delmember(id);
    console.log('resres', res);
    if (res.status === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
      getList();
    }
  });
};

// 处理分页
const handeSizeChange = (val:number) => {
  console.log('val', val);
  limit.value = val;
  getList();
};
const handlePageChange = (val: number) => {
  page.value = val;
  getList();
};

// 号码部分隐藏
const setPhone = (phone: string | null) => {
  console.log('phone的类型', typeof (phone));
  if (phone === '') {
    return '-';
  }
  return `${phone.substring(0, 3)}****${phone.slice(7)}`;
};
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.demo-form-inline{
  box-sizing: border-box;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}
.vipname{
  .el-input{
    width: 50%;
  }
  .el-select{
    width: 50%;
  }
}
.edit{
  cursor: pointer;
  color: #00acac;
  .iconfont{
    font-size: 14px;
  }
}
.topUp{
  color: red;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: left;
  button{
    background-color: #00acac;
    color: #fff;
  }
}
// .el-table .el-table__cell.is-center {
//     text-align: center;
// }
//  .plusvip{
//   color: #fff;
//   font-size: 14px;
//   font-weight: 700;
//   background-color: #00acac;
//   line-height: 30px;
// }
</style>
